Android এবং iOS এর জন্য Custom Native Modules তৈরি

React Native আপনাকে JavaScript কোডের মাধ্যমে মোবাইল অ্যাপ তৈরি করার সুবিধা দেয়, তবে কখনও কখনও আপনার অ্যাপের জন্য নেটিভ ফিচার বা কাস্টম কোড প্রয়োজন হতে পারে যা React Native সরাসরি সাপোর্ট করে না। এই ক্ষেত্রে, আপনি Custom Native Modules তৈরি করতে পারেন যা JavaScript থেকে নেটিভ কোড (Java বা Swift/Objective-C) কল করার সুযোগ দেয়।

এখানে, আমরা Android এবং iOS এর জন্য কাস্টম নেটিভ মডিউল তৈরি করার প্রক্রিয়া বিস্তারিতভাবে আলোচনা করব।

১. Android এর জন্য Custom Native Module তৈরি

Step 1: নতুন Native Module তৈরি করা

1. প্রথমে, React Native Project তৈরি করুন (যদি না থাকে)।

2. android/app/src/main/java/com/{project_name}/ ডিরেক্টরিতে একটি নতুন জাভা ক্লাস তৈরি করুন, যেমন MyCustomModule.java:

   package com.myapp;
   
   import com.facebook.react.bridge.ReactApplicationContext;
   import com.facebook.react.bridge.ReactContextBaseJavaModule;
   import com.facebook.react.bridge.ReactMethod;
   
   public class MyCustomModule extends ReactContextBaseJavaModule {
   
       MyCustomModule(ReactApplicationContext reactContext) {
           super(reactContext);
       }
   
       @Override
       public String getName() {
           return "MyCustomModule";  // মডিউলের নাম
       }
   
       // Custom method for JavaScript to call
       @ReactMethod
       public void showMessage(String message) {
           // এখানে আপনার কাস্টম কোড থাকবে, যেমন একটি Toast মেসেজ
           Toast.makeText(getReactApplicationContext(), message, Toast.LENGTH_LONG).show();
       }
   }

Step 2: মডিউলটি রেজিস্টার করা

1. MainApplication.java ফাইলে, মডিউলটি রেজিস্টার করুন:

   import com.myapp.MyCustomModule;  // আপনার মডিউল ইম্পোর্ট করুন
   
   @Override
   public List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
               new MainReactPackage(),
               new MyCustomPackage()  // আপনার কাস্টম প্যাকেজটি যুক্ত করুন
       );
   }

2. নতুন প্যাকেজ ক্লাস তৈরি করুন যা MyCustomModule রেজিস্টার করবে:

   package com.myapp;
   
   import com.facebook.react.bridge.ReactApplicationContext;
   import com.facebook.react.bridge.ReactPackage;
   import com.facebook.react.bridge.NativeModule;
   import com.facebook.react.bridge.NativeModuleRegistry;
   import com.facebook.react.bridge.ReactContextBaseJavaModule;
   import com.facebook.react.bridge.JavaScriptModule;
   import com.facebook.react.uimanager.ViewManager;
   
   import java.util.ArrayList;
   import java.util.Collections;
   import java.util.List;
   
   public class MyCustomPackage implements ReactPackage {
   
       @Override
       public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
           List<NativeModule> modules = new ArrayList<>();
           modules.add(new MyCustomModule(reactContext)); // কাস্টম মডিউল যোগ করুন
           return modules;
       }
   
       @Override
       public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
           return Collections.emptyList();
       }
   }

Step 3: JavaScript থেকে মডিউল ব্যবহার করা

1. JavaScript কোডে, আপনার কাস্টম মডিউল ব্যবহার করতে হবে:

   import { NativeModules } from 'react-native';
   
   const { MyCustomModule } = NativeModules;
   
   // মডিউল ব্যবহার করুন
   MyCustomModule.showMessage('Hello from Native Android!');

২. iOS এর জন্য Custom Native Module তৈরি

Step 1: নতুন Native Module তৈরি করা

1. iOS অ্যাপের মধ্যে নতুন একটি Objective-C বা Swift ক্লাস তৈরি করুন। এখানে Objective-C উদাহরণ দেখানো হলো।

2. ios/{project_name}/ ডিরেক্টরিতে একটি নতুন .m ফাইল তৈরি করুন, যেমন MyCustomModule.m:

   #import <React/RCTBridgeModule.h>
   
   @interface MyCustomModule : NSObject <RCTBridgeModule>
   @end
   
   @implementation MyCustomModule
   
   // React Native থেকে কল করা যাবে এমন method তৈরি করুন
   RCT_EXPORT_MODULE();
   
   RCT_EXPORT_METHOD(showMessage:(NSString *)message)
   {
       UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"Message"
                                                                      message:message
                                                               preferredStyle:UIAlertControllerStyleAlert];
       UIAlertAction *defaultAction = [UIAlertAction actionWithTitle:@"OK"
                                                             style:UIAlertActionStyleDefault
                                                           handler:nil];
       [alert addAction:defaultAction];
       UIViewController *rootViewController = [UIApplication sharedApplication].keyWindow.rootViewController;
       [rootViewController presentViewController:alert animated:YES completion:nil];
   }
   
   @end

Step 2: AppDelegate.m এ মডিউল রেজিস্টার করা

1. AppDelegate.m ফাইলে এই মডিউল রেজিস্টার করতে হবে:

   #import "MyCustomModule.h"  // মডিউল ইম্পোর্ট করুন
   
   - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
   {
       // ...
       return YES;
   }

Step 3: JavaScript থেকে মডিউল ব্যবহার করা

1. JavaScript কোডে, iOS কাস্টম মডিউল ব্যবহার করুন:

   import { NativeModules } from 'react-native';
   
   const { MyCustomModule } = NativeModules;
   
   // মডিউল কল করা
   MyCustomModule.showMessage('Hello from Native iOS!');

সারাংশ

• Custom Native Modules React Native এর একটি শক্তিশালী ফিচার যা আপনাকে Java (Android) অথবা Objective-C/Swift (iOS) কোড লিখে React Native অ্যাপে নেটিভ ফিচার যোগ করতে সহায়ক।
• Android এবং iOS উভয়ের জন্য কাস্টম মডিউল তৈরি করতে আপনাকে নেটিভ কোড লিখতে হবে এবং সেটি React Native এর JavaScript কোডের সাথে সংযুক্ত করতে হবে।
• আপনি NativeModules ব্যবহার করে আপনার কাস্টম মডিউলটি React Native অ্যাপে কল করতে পারেন।

এভাবে, আপনি Android এবং iOS উভয় প্ল্যাটফর্মের জন্য কাস্টম ফিচার এবং নেটিভ কোড পরিচালনা করতে পারেন।